<template>
  <hry-header title="募资总金额" :showBackBtn="true" backRouterName="home">
    <div class="main" slot="content">
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        :auto-reflow="true"
        @endReached="$_onEndReached"
        @refreshing="$_onRefresh"
      >
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          roller-color="#FD7400"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <total-amount-raised
          v-for="(item, index) in data"
          :key="index"
          :cardInfo="item"
        ></total-amount-raised>
        <md-scroll-view-more slot="more" :is-finished="isFinished">
        </md-scroll-view-more>
      </md-scroll-view>
    </div>
  </hry-header>
</template>

<script>
import hryHeader from "@/components/contentWrapper/index";
import { ScrollView, ScrollViewMore, ScrollViewRefresh } from "mand-mobile";
export default {
  name: "alwaysRaise",
  components: {
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    hryHeader: hryHeader,
    totalAmountRaised: () => import("@/components/total-amount-raised/index")
  },
  data() {
    return {
      curpage: 1,
      data: [],
      isFinished: false,
      totalPage: 1
    };
  },
  methods: {
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    $_onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(this.$api.getTotalList, { curpage: this.curpage })
        .then(res => {
          if (refresh) {
            this.data = res.data.data.list;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data.data.list);
          }
          this.totalPage = res.data.data.total_page;
          if (this.curpage === this.totalPage) {
            this.isFinished = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  }
};
</script>

<style scoped lang="stylus">
.main{
  width 100%;
  height 100%;
  overflow hidden
}
</style>
